<template>
  <drawer-view
    :body-style="{ height: '100%'}"
    width="1200px"
    @close="close"
    @afterEnter="afterEnter">
    <flexbox
      v-loading="loading"
      direction="column"
      align="stretch"
      class="st-drawer">
      <flexbox class="st-drawer__header">
        <img :src="customer_active" class="header-mark"/>
        <div class="title">{{ params.customerName }}</div>
        <div>
          <el-button type="primary" plain>修 改</el-button>
<!--          <el-button type="primary">关 闭</el-button>-->
        </div>
      </flexbox>
      <div class="st-drawer__body">
        <st-sections title="基本信息">
          <el-descriptions  :column="3" border style="margin-top: 10px;">
            <el-descriptions-item label="客户来源:">{{params.sourceDisp}}</el-descriptions-item>
            <el-descriptions-item label="客户性质:">{{params.natureDisp}}</el-descriptions-item>
            <el-descriptions-item label="客户行业:">{{params.industryDisp}}</el-descriptions-item>
            <el-descriptions-item label="客户分级:">
              <el-tag size="small">{{params.gradeDisp}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="详细地址:">{{params.address}}</el-descriptions-item>
          </el-descriptions>
        </st-sections>
        <st-sections title="关联信息">
          <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
            <el-tab-pane label="跟进记录" name="record">
              <record ref="record" :customerForm="params"></record>
            </el-tab-pane>
            <el-tab-pane label="详细信息" name="detail">
              <detail :customerForm="params"></detail>
            </el-tab-pane>
            <el-tab-pane label="相关联系人" name="contacts">
              <contacts ref="contactsRef" :customerForm="params"></contacts>
            </el-tab-pane>
            <el-tab-pane label="商机" name="business">
              <business ref="businessRef" :customerForm="params"></business>
            </el-tab-pane>
            <el-tab-pane label="合同" name="contract">
              <contract ref="contractRef" :customerForm="params"></contract>
            </el-tab-pane>
            <el-tab-pane label="回款计划" name="plan">
              <plan ref="planRef"></plan>
            </el-tab-pane>
            <el-tab-pane label="回款单" name="receivables">
              <receivables ref="receiveablesRef"></receivables>
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="operate">
              <operate ref="operateRef"></operate>
            </el-tab-pane>
          </el-tabs>
        </st-sections>
      </div>
    </flexbox>
  </drawer-view>
</template>

<script>
import DrawerView from '@/components/StDrawer/DrawerView.vue'
import record from './record'
import flexbox from '@/components/Flexbox/Flexbox.vue'
import customer_active from '@/assets/img/address_logo.png'
import detail from './detail.vue'
import business from "./business/main.vue";
import contract from './contract/main.vue'
import plan from './plan/main.vue'
import receivables from './receivables/tabList.vue'
import contacts from './contacts.vue'
import operate from './operate.vue'
export default {
  // 创建页面
  name: 'XrCreate',
  components: {
    business,
    contacts,
    record,
    DrawerView,
    flexbox,
    detail,
    plan,
    receivables,
    contract,
    operate
  },
  props: {
    title: {type :String,
      default:''
    },
    loading: Boolean,
    appendToBody: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    confirmDisabled: {
      type: Boolean,
      default: false
    },
    confirmButtonText: {
      type: String,
      default: '保存'
    },
    params:{
      type:Object,
      default:function() {
        return {};
      }
    }
  },
  data() {
    return {
      customer_active:customer_active,
      activeName:'record'
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    if (this.appendToBody) {
      document.body.appendChild(this.$el)
    }
  },

  destroyed() {
    if (this.appendToBody) {
      if (this.$el && this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el)
      }
    }
  },
  methods: {
    show(param){
      //this.params=Object.assign('',param);
    },

    handleClick(tab, event) {
      switch (tab.index) {
        case '0':
          this.$refs.record.show()
          break;
        case '2':
          this.$refs.contactsRef.getList();
          break;
        case '3':
          this.$refs.businessRef.showTabList();
          break;
        case '4':
          this.$refs.contractRef.showTabList();
          break;
        case '5':
          this.$refs.planRef.showTabList();
          break;
        case '6':
          this.$refs.receiveablesRef.getList();
          break;
        case '7':
          this.$refs.operateRef.showTabList();
          break;
      }
      console.log(tab, event);
    },

    afterEnter() {
      this.$emit('afterEnter')
    },

    save() {
      this.$emit('save')
    },

    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.st-drawer {
  position: relative;
  height: 100%;

  &__header {
    height: 40px;
    margin-bottom: 10px;
    padding: 0 10px;
    flex-shrink: 0;
    border-bottom: 1px solid #d3dce6;
    .title {
      flex:1;
      font-size:17px;
      color:#333;
      font-weight: bold;
      margin-left: 10px;
    }
    .close {
      display: block;
      font-size: 24px;
      color: #909399;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
    .close:hover {
      color: #909399;
    }
  }

  &__body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  &__footer {
    position: relative;
    text-align: center;
    padding: 10px 20px 0;
    border-top: 1px solid #d3dce6;
  }

  .header-mark{
    //border-left-color: #2362FB;
    //border-left-width: 6px;
    //border-left-style: solid;
    //border-radius: 0px;
    height: 30px;
    width: 30px;
    //padding-right: 9px;
  }
}
</style>
